<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>新闻动态</title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/swiper-3.4.2.min.css"/>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js"></script>
		<script src="__PUBLIC__/midi/js/public.js"></script>
		<script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
		<style>
			.news .con{
				width: 1200px;
				margin: 0 auto;
			}
			.news-item{
				padding-top: 36px;
                padding-left: 48px;
                border-bottom: 1px solid #eee;
                height: 200px;
                padding-bottom: 38px;
			}
			.news-item .news-item-left {
                float: left;
                width: 27%;
                height: 0;
                padding-top: 15%;
                position: relative;
                overflow: hidden;
			}
			.news-item .news-item-left img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				display: inline-block;
				height: 100%;
			}
			.news-item .img{
				width: 322px;
				display: inline-block;
			}
			.news-item-right{
				float: left;
                width: calc(100% - 362px - 70px);
                padding-top: 10px;
                padding-left: 40px;
                padding-right: 70px;
			}
			.news-item-right h2{
				font-size: 22px;
				color: #333;
				margin-bottom:28px;
				cursor: pointer;
				font-weight: bold;
			}
			.news-item-right p{
				font-size: 18px;
				margin-bottom: 40px;
				line-height: 36px;
				height: 72px;
				overflow: hidden;
				position: relative;
			}
			.news-item-right span{
				font-size: 18px;
				color: #acabab;
			}
			@media only screen and (min-width:1201px ) {
				.wiezhi{
					display: none;
				}
			}
			@media only screen and (max-width:1200px ) {
				.banner{
					display: none;
				}
				.news .con{
					width: 100%;
				}
				.news-item{
					padding: 2vw;
					display: -webkit-flex;
					height: auto;
				}
				.news-item-right{
					width: 73%;
					padding-top: 0;
					padding-left: 28px;
					padding-bottom: 10px;
					height: calc(100% - 14px - 10px);
					position: relative;
					padding-right: 0;
				}
				.news-item-right h2{
					font-size: 4vw;
					color: #333;
					margin-bottom: 10px;
				}
				.news-item-right p{
					font-size: 3.333333vw;
					line-height: inherit;
					height: auto;
					overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                   -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    margin-bottom: 20px;
				}
				.news-item-right span{
					position: absolute;
					bottom: 4px;
					font-size: 3.333333vw;
				}
				.pages{
					font-size: 4vw;
				}
			}
		</style>
<style type='text/css'>
	.pages a,.pages span {
	    display:inline-block;
	    padding:5px 9px;
	    margin:0 1px;
	    border:1px solid #f0f0f0;
	}
	.pages a,.pages li {
	    display:inline-block;
	    list-style: none;
	    text-decoration:none; color:#29d0c9;
	}
	.pages a.first,.pages a.prev,.pages a.next,.pages a.end{
	    margin:0;
	}
	.pages a:hover{
	    border-color:#29d0c9;
	}
	.pages span.current{
	    background:#29d0c9;
	    color:#FFF;
	    font-weight:700;
	    border-color:#29d0c9;
	}
	.table input,select{
		border-radius:6px !important;
	}
	.pages{
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		padding: 5% 0;
	}
</style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<!--首页第一个轮播图开始-->
		<div class="banner">
            <img src="__PUBLIC__/midi/img/44.png" />
		</div>
		<!--首页第一个轮播图结束-->
		<div class="shipin-datails">
			<div class="con">
				<div class="inner">
					<i></i>
				    <span>当前位置：首页 &gt; 新闻动态</span>
				</div>
			</div>
		</div>
		<div class="wiezhi">
			   <div class="con">
				  <span>当前位置：新闻动态</span>
			   </div>
		    </div>
		<!--新闻页的主要内容-->
		<div class="news">
			<div class="con">
				<foreach name="news_arr" item="v">
				<div class="news-item">
					<div class="news-item-left">
                         <img class="img" src="{$v.news_pic}"/>
					</div>
					<div class="news-item-right">
						<div>
							<h2><a href="{$v.news_url}" target="_blank" >{$v.news_title}</a></h2>
							<p>{$v.news_summary}</p>
							<span>{$v.news_createtime|date="Y-m-d",###}</span>
						</div>
					</div>
				</div>
				</foreach>
			</div>
		</div>
		<div class="pages">{$page}</div>
		<script>
			$(function(){
				$(".news-item").hover(
					function(){
						$(this).css({'background-color':'#f5f8f8'});
						$(this).find("h2 a").css({'color':'#29d0c9'});
					},
					function(){
						$(this).css({'background-color':'#fff'});
						$(this).find("h2 a").css({'color':'#333'});
					}
				)
			})
		</script>
	</body>
</html>
